﻿<script type="text/javascript" src="/content/bootstrap/bootstrap-tooltip.js"></script>
<script type="text/javascript" src="/content/bootstrap/bootstrap-popover.js"></script>
<script type="text/javascript" src="/content/pusher/pusher.min.js"></script>
<div class="feedColumn" id="feedColumn1">
</div>
<div class="feedColumn" id="feedColumn2">
</div>
<div class="feedColumn" id="feedColumn3">
</div>
@model List<IReklamo.Complaint>
@{
    var columnNo = 0;
    foreach (var complaint in Model.OrderBy(r => r.Id).ToList())
    {
        columnNo = columnNo == 3 ? 1 : columnNo + 1;
    @Html.Partial("Complaint", complaint)
    <script type="text/javascript">
        $(function () {
            var complaintId = @(complaint.Id);
            $('#feedColumn@(columnNo)').append($('#divComplaint' + complaintId));
            initializePusher();
            var channel = pusher.subscribe('complaint_channel_' + complaintId);
            
            channel.bind('changed', function (data) {
                console.log(JSON.stringify(data));
                if (data.type == "comment") {
                    insertCommentHtml(data.complaintId, data.message, data.name);
                    var spanTotal = $('div#divComment' + data.complaintId).find("span");
                    spanTotal.html(parseInt(spanTotal.html()) + 1);
                } else if (data.type == "support") {
                    var spanTotal = $('div#divSupport' + data.complaintId).find("span");
                    spanTotal.html(parseInt(spanTotal.html()) + 1);
                } else if (data.type == "dislike") {
                    var spanTotal = $('div#divDislike' + data.complaintId).find("span");
                    spanTotal.html(parseInt(spanTotal.html()) + 1);
                }
            });
        });
    </script>
    }
}
<script type="text/javascript">
    var newComplaintColNo = 1;
    $(function () {
        $('div#divTitle').each(function () {
            $(this).popover({
                title: '<span style="font-size:12px;">' + $(this).find("span#spanTitle").html() + '</span>',
                content: function () {
                    return $(this).find("input:hidden").val();
                }
            });
        });

        $('div#divTitle').mouseover(function () {
            $(this).css("background-color", "#FFC40D");
        });

        $('div#divTitle').mouseout(function () {
            $(this).css("background-color", "#f9f9f9");
        });

        $("a#linkSupport").each(function () {
            $(this).tooltip({
                title: "I support this complaint",
                placement: 'top'
            });
        });

        $("a#linkDislike").each(function () {
            $(this).tooltip({
                title: "I don't like this complaint",
                placement: 'top'
            });
        });

        initializePusher();
        channel.bind('complaint_added', function(data) {
          $.get("/Complaints/GetComplaint", {complaintId :data.complaintId}, function(data){
            $("#feedColumn" + newComplaintColNo).prepend(data);
          });
          newComplaintColNo = newComplaintColNo == 3 ? 1 : newComplaintColNo + 1;
        });
    });

    function initializePusher(){
        if (typeof channel === 'undefined') {
            // Enable pusher logging - don't include this in production
            Pusher.log = function(message) { if (window.console && window.console.log) window.console.log(message);};
            WEB_SOCKET_DEBUG = true; // Flash fallback logging - don't include this in production
            pusher = new Pusher('f06c7e3ab535a9a25377');
            channel = pusher.subscribe('feed_channel');
        }
    }

    function support(complaintId) {
        var div = $('div#divSupport' + complaintId);
        $.ajax({
            url: '/Complaints/Support',
            data: {
                complaintId: complaintId,
            }
        }).done(function (result) {
            div.find("span").html(result.total);
            var link = div.find("a");
            link.tooltip('hide');
            div.html(link.html());
        });
    }

    function dislike(complaintId) {
        var div = $('div#divDislike' + complaintId);
        $.ajax({
            url: '/Complaints/Dislike',
            data: {
                complaintId: complaintId,
            }
        }).done(function (result) {
            div.find("span").html(result.total);
            var link = div.find("a");
            link.tooltip('hide');
            div.html(link.html());
        });
    }

    function comment(complaintId) {
        var div = $('div#divCommentSection' + complaintId);
        if (div.data('loadedAlready') == undefined) {
            div.data('loadedAlready', true);
            $.ajax({
                url: '/Complaints/GetComments',
                data: {
                    complaintId: complaintId
                }
            }).done(function (result) {
                $(result).each(function (i, o) {
                    insertCommentHtml(complaintId, o.message);
                });
                toggleComment(complaintId);
            });
        } else {
            toggleComment(complaintId);
        }

    }

    function toggleComment(complaintId) {
        var div = $('div#divCommentSection' + complaintId);
        div.toggle('slow', function () {
            if (div.is(":visible")) {
                div.find('#txtCommentBox' + complaintId).focus();
            }
        });
    }

    function addComment(complaintId) {
        var txtCommentBox = $("#txtCommentBox" + complaintId);
        var comment = txtCommentBox.val()
        $.ajax({
            url: '/Complaints/AddComment',
            data: {
                complaintId: complaintId,
                message : comment
            }
        }).done(function (result) {
            txtCommentBox.val('');
            txtCommentBox.focus();
        });
    }

    function insertCommentHtml(complaintId, comment, name) {
        if (name == undefined || name == "") {
            name = 'Anonymous'
        }
        var div = $("#divCommentBox" + complaintId);
        $('<div class="commentBox">' + name +  ' : ' + comment + '<div>').insertBefore(div);
    }
</script>
